<template>
	<view class="shop-container">
		<view class="index-header">
			<!--搜索-->
			<view class="index1_content_top" :style="{background:'#fcc80e'}">
				<view style="width: 20%;color: #fff;font-size: 30rpx;font-weight: bold;overflow: hidden;
				text-overflow:ellipsis;white-space: nowrap;" @click="setCITY">
					<view>{{city != '' ? city : '附近的'}}</view>
				</view>
				<view class="index1_content_top_l_r"></view>
				<view class="index1_content_top_r">
					<view class="iconfont iconsousuo"></view>
					<input type="text" placeholder="输入店铺名" class="index1_content_top_r_input"
						@click="search"></input>
				</view>
			</view>
			
			<view class="header-menu">
				<view class="menu-item" @click="openUrl('/merchants/local_life/shopList')">附近门店</view>
				<view class="menu-item" @click="openUrl('/merchants/local_life/goodsList?type=1')">本地团购</view>
				<view class="menu-item" @click="openUrl('/pages/diy/diy?pid=247814&page_id=171')">积分兑换</view>
				<view class="menu-item" @click="openUrl('/merchants/local_life/goodsList?type=2')">购物券本地兑</view>
			</view>
		</view>
		
		<view class="shop-type">
			<cg-swiper :swiperList="catorylist" :swiperDots='true' :autoplay='false' @clickItem="clickItem"></cg-swiper>
		</view>
	
		
		<view class="shop_table_list">
			<view class="shop_table_item" v-for="(item,index) in shopList" :key='index' @click="openUrl('/merchants/detail/detail?store_id=' + item.id)">
				<view class="shop_table_item_left">
					<!-- <image :src="item.cover_url" mode="aspectFit"></image> -->
					<u-lazy-load :image="item.cover_url"></u-lazy-load>
				</view>
				<view class="shop_table_item_right">
					<view class="shop_table_item-name">
						{{item.name}}
					</view>
					<view class="shop_table_item-score">
						<view class="iconfont iconwujiaoxing" v-for="(i,index) in Number(item.score)"
							style="color: #fcc80e;" :key='index'></view>
						<view class="point" style="font-size: 28rpx;color: red;margin-left: 10rpx;">{{item.score}}
						</view>
					</view>
					<view class="shop_table_item_notice" v-if="item.config.rewards">
						消费100送<span style="font-size: 12pt;margin: 0 10rpx;font-weight: 600;">100</span>积分
					</view>
					<view class="shop_table_item-location">
						<view style="width: 40rpx;height:40rpx;">
							<svg t="1720171465192" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4325">
								<path d="M512 174.08c-132.645926 0-240.165926 107.52-240.165926 240.165926 0 139.472593 173.795556 358.58963 225.754074 420.882963 7.49037 9.007407 21.428148 9.007407 28.918519 0C578.37037 772.93037 752.165926 553.718519 752.165926 414.245926 752.165926 281.6 644.645926 174.08 512 174.08zM522.334815 778.903704c-5.30963 6.542222-15.36 6.542222-20.66963 0C443.448889 706.939259 308.717037 528.118519 308.717037 415.099259c0-112.071111 91.211852-203.282963 203.282963-203.282963s203.282963 91.211852 203.282963 203.282963C715.282963 528.118519 580.551111 706.939259 522.334815 778.903704z" fill="#272536" p-id="4326"></path><path d="M512.948148 298.192593c-63.051852-0.568889-114.346667 50.725926-113.777778 113.777778 0.474074 61.25037 50.631111 111.312593 111.881481 111.881481 63.051852 0.568889 114.346667-50.725926 113.777778-113.777778C624.260741 348.823704 574.198519 298.761481 512.948148 298.192593zM512 485.925926c-41.339259 0-74.903704-33.564444-74.903704-74.903704s33.564444-74.903704 74.903704-74.903704 74.903704 33.564444 74.903704 74.903704S553.339259 485.925926 512 485.925926z" fill="#272536" p-id="4327"></path>
							</svg>
						</view>
						<text class="address">{{item.region_name}}</text>
						<text>|&nbsp;&nbsp;{{item.distance_format}}</text>
					</view>
				</view>
			</view>

			<u-loadmore style="padding: 20rpx 0;" :status="loadingStatus" :load-text="loadText" @loadmore="clickLoadMoreHandler"/>
		</view>
		
		<hans-tabber style="position:fixed;bottom:0;width:100%;left:0;right:0;"></hans-tabber>
		<citySelect @back_city="back_city" v-if="show"></citySelect>
		<backTop :src="backTop.src" :scrollTop="backTop.scrollTop"></backTop>
	</view>
</template>

<script>
	import hansTabber from '@/components/hans-tabbar/hans-tabbar.vue';
	import citySelect from '@/components/linzq-city/linzq-city.vue';
	import backTop from '@/components/back-top/back-top.vue';
	export default {
		components: {
			hansTabber,
			citySelect,
			backTop
		},
		data() {
			return {
				loadingStatus:'loadmore',
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				shopList:[],
				shopSearchForm:{
					cat_id:''
				},
				shopPagination:{
					current_page:1,
					page_count:0,
					total_count:0,
					pageSize:0
				},
				catorylist:[],
				show: false, //城市选择显示或者影藏
				city: '',
				backTop: {
					src: '/static/back-top/top.png',
					scrollTop: 0
				},
			}
		},
		onLoad(options) {
			if (!uni.getStorageSync("shopCity")) {
				this.getmyLOcation()
			}
			if (options.pid) {
				uni.setStorageSync('pid', options.pid);
				uni.setStorageSync("user_id", options.pid);
			}
			this.getcatory()
			this.getshopList()
		},
		onShow(){
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由   //   webview/webview
			let curParam = routes[routes.length - 1].options; //获取路由参数     //   {"userId":"1000007"}
			if (typeof curParam['pid'] != "undefined" && curParam.pid) {
				uni.setStorageSync('pid', curParam.pid);
				uni.setStorageSync("user_id", curParam.pid);
			}
		},
		methods: {
			getcatory() { //获取分类
				this.$http.request({
					url: this.$api.moreShop.getcategorylist,
					method: 'POST',
					data: '',
					showLoading: true
				}).then(res => {
					if (res.code == 0) {
						this.catorylist = res.data.list
					} else {
						this.$http.toast(res.msg);
					}
				});
			},
			search() { //点击搜索
				uni.navigateTo({
					url: '../shopSearch/shopSearch'
				})
			},
			setCITY() { //选择城市
				this.show = true
			},
			back_city(e) { //城市选择回显
				if (e !== 'no') {
					this.city = e.name;
					this.show = false;
					this.form.page = 1
					this.page_count = ''
					this.goodsList = []
					this.form.city_id = e.parent_id
					this.form.region_id = e.id
					uni.setStorageSync('shopCity', {
						city: e.name,
						city_id: e.parent_id,
						region_id: e.id
					})
					this.getGoodsList()
				} else {
					this.show = false;
				}
			},
			openUrl(url){
				uni.navigateTo({url});
			},
			
			
			//触底或手动点击加载更多的处理方法
			clickLoadMoreHandler(){
				if( this.shopPagination.current_page < this.shopPagination.page_count ){
					this.loadingStatus = 'loading';
					setTimeout(() => {
						this.shopPagination.current_page++;
						this.getshopList();
					},1000)
				}else{
					this.loadingStatus = 'nomore'
				}
			},
			
			//获取门店列表
			async getshopList() { 
				let res = await this.$http.request({
					url: this.$api.moreShop.getshoplistall,
					method: 'POST',
					data: {page:this.shopPagination.current_page,...this.shopSearchForm},
					showLoading:true
				});
				if(res.code !== 0){
					this.loadingStatus = 'nomore';
					return this.$http.toast(res.msg);
				}
				this.shopList.push(...res.data.list);
				this.shopPagination = res.data.pagination;
				this.loadingStatus = 'loadmore';
			},
			clickItem(e) {
				this.shopSearchForm.cat_id = e.id;
				this.shopPagination.current_page = 1
				this.shopList = []
				this.getshopList()
			},
			
			
			getmyLOcation() {
				let that = this
				
				//#ifdef H5
				that.$unifylocation.locationH5()
				setTimeout(() => {
					if(uni.getStorageSync('x-longitude-new'),uni.getStorageSync('x-latitude-new')){
						console.log(uni.getStorageSync('x-longitude-new'),uni.getStorageSync('x-latitude-new'))
						uni.setStorageSync('x-longitude',uni.getStorageSync('x-longitude-new'))
						uni.setStorageSync('x-latitude',uni.getStorageSync('x-latitude-new'))
						console.log(uni.getStorageSync('x-longitude'),uni.getStorageSync('x-latitude'))
					}
				}, 500)
				// #endif
				
				// #ifndef H5
				that.$unifylocation.locationMp()
				setTimeout(() => {
					if(uni.getStorageSync('x-longitude-new'),uni.getStorageSync('x-latitude-new')){
						console.log(uni.getStorageSync('x-longitude-new'),uni.getStorageSync('x-latitude-new'))
						uni.setStorageSync('x-longitude',uni.getStorageSync('x-longitude-new'))
						uni.setStorageSync('x-latitude',uni.getStorageSync('x-latitude-new'))
						console.log(uni.getStorageSync('x-longitude'),uni.getStorageSync('x-latitude'))
					}
				}, 500)
				// #endif
			},
	
		},
		onPageScroll(e) {
			this.backTop.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.clickLoadMoreHandler();
		}
	}
</script>
<style lang="less" scoped>
	@import url("../../plugins/font-icon/iconfont1.css");

	.shop-container {
		width: 100%;
		overflow: hidden;
	}

	.index1_content_top {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 15px 15px 10px 15px;
	}
	
	.index-header{
		width: 100vw;
		position: fixed;
		top:0;
		left: 0;
		z-index: 999;
	}
	.header-menu{
		display: flex;
		background-color: #fff;
		justify-content: space-around;
		box-shadow: 0 2rpx 4rpx rgba(0,0,0,.4);
		font-size: 12pt;
		color: #da0202;
	}
	.header-menu .menu-item{
		padding: 30rpx 0;
	}
	
	

	.index1_content_top_l {
		display: flex;
		font-size: 13px;
		font-weight: bold;
		color: #131313;
	}

	.index1_content_top_l_r {
		margin-left: 5px;
		width: 8px;
		height: 8px;
		border-top: 2px #FFF solid;
		border-right: 2px #fff solid;
		transform: rotate(135deg);
		margin-top: 3px;
		margin-bottom: 8px;
	}

	.index1_content_top_r {
		width: 60%;
		height: 29px;
		background: #F4F4F4;
		border-radius: 14px;
		font-size: 14px;
		margin-left: 15px;
		display: flex;
		align-items: center;
		padding-left: 15px;
	}

	.index1_content_top_r_input {
		width: 100%;
		font-size: 14px;
	}

	.shop-type {
		width: 100%;
		overflow: hidden;
		/* #ifdef H5*/
			margin-top: 120rpx;
		/* #endif */
		/* #ifdef APP-PLUS||MP */
			margin-top: 108rpx;
		/* #endif */
	}

	.shop-table {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-evenly;
		background: rgb(244, 244, 244);
	}

	.shop-table view {
		width: 30%;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.shop-table view text {
		display: block;
		margin: 0 auto;
		width: 100%;
		text-align: center;
	}

	.shop-table view text:nth-of-type(2) {
		width: 80rpx;
		height: 5rpx;
	}

	.active {
		color: #FF7104;
	}

	.active text:nth-of-type(2) {
		background: #FF7104;
	}

	.shop_table_list {
		width: 100%;
		overflow: hidden;
		margin-bottom: 116rpx;
		background-color: #f1f1f1;
	}

	.shop_table_item {
		width: 95%;
		margin: 15rpx auto;
		background: #fff;
		display: flex;
		justify-content: space-evenly;
		overflow: hidden;
		border-radius: 20rpx;
		align-items: center;
	}

	.shop_table_item_left {
		width: 30vw;
		height: 30vw;
		margin: 25rpx 0;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.shop_table_item_left image {
		width: 100%;
		display: block;
		height: 100%;
	}

	.shop_table_item_right {
		width: 64%;
		padding-left: 10rpx;
		box-sizing: border-box;
		margin: 15rpx 0 20rpx 0;
		position: relative;
	}

	.shop_table_item-name {
		width: 100%;
		font-size: 30rpx;
		color: #000;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.shop_table_item_notice {
		font-size: 27rpx;
		color: rgb(255, 166, 0);
		margin-top: 15rpx;
		background: rgb(247, 236, 230);
		width: 80%;
		text-align: center;
		border-radius: 1rpx;
	}

	.shop_table_item-score {
		width: 100%;
		overflow: hidden;
		flex: 1;
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.shop_table_item-location {
		width: 100%;
		overflow: hidden;
		font-size: 9pt;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}

	.shop_table_item-location image {
		display: inline-block;
		position: relative;
		top: 6rpx;
	}

	.shop_table_item-location .address{
		width: 70%;
		overflow: hidden;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}
	
	.shop_table_item .price{
		font-size: 8pt;
		background-image: url('@/static/icon/goods_price_b.png');
		background-size: cover;
		background-repeat: no-repeat;
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
		border-radius: 100rpx;
		padding-left:30rpx;
	}
	
	.shop_table_item .price .button{
		font-size: 14pt;
		color:#fff;
		display: flex;
		align-items: center;
		padding-right: 30rpx;
		padding-left: 40rpx;
		border-bottom-right-radius: 50px;
		border-top-right-radius: 50px;
		position: relative;
	}
	
	.shop_table_item .price .left{
		width: 70%;
		color:#da0202;
		margin-right: 20rpx;
	}

	// .shop_table_item .price .button::after{
	// 	content: '';
	// 	position: absolute;
	// 	top: 0;
	// 	left: -2rpx;
	// 	border-style: solid;
	// 	border-color: rgb(250, 240, 240);
	// 	border-left-width: 10rpx;
	// 	border-top-width: 26rpx;
	// 	border-bottom-width: 26rpx;
	// 	border-right-width: 10rpx;
	// 	border-bottom-color: transparent;
	// 	border-right-color: transparent;
	// }
	// .shop_table_item .price .button::before{
	// 	content: '';
	// 	position: absolute;
	// 	bottom: 0;
	// 	left: -2rpx;
	// 	border-style: solid;
	// 	border-color: rgb(250, 240, 240);
	// 	border-left-width: 10rpx;
	// 	border-top-width: 22rpx;
	// 	border-bottom-width: 22rpx;
	// 	border-right-width: 10rpx;
	// 	border-bottom-color: transparent;
	// 	border-right-color: transparent;
	// }
	.tags{
		border-radius: 10rpx;
		padding: 4rpx 10rpx;
		color:#da0202;
		margin:5rpx;
		border: 1px solid #da0202;
	}
</style>
